<template>
  <!-- 同步汇率 -->
  <a-modal :width="800" v-model:visible="showSyncRateDialog" title="同步更新汇率" title-align="start" :mask-closable="false" @cancel="closedDialog" :ok-loading="submitLoading" :on-before-ok="submitAudit">
    <a-form ref="formRef" :model="formInfo" :rules="rules">
      <a-form-item field="gmtRates" label="同步月份:" style="margin-bottom: 30px">
        <a-select style="width: 300px" v-model="formInfo.gmtRates" placeholder="选择月份" multiple :max-tag-count="2" allow-clear>
          <a-option v-for="month in monthList" :key="month">{{ month }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="currencyList" label="同步币种:">
        <a-space direction="vertical">
          <a-checkbox-group v-model="formInfo.currencyList" @change="handleChange">
            <a-checkbox style="width: 170px" v-for="(item, i) in list" :key="i" :value="item.currency">{{ item.currencyChName }}-{{ item.currency }}</a-checkbox>
          </a-checkbox-group>
          <a-checkbox style="margin-top: 20px" :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll">全选</a-checkbox>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { manualSyncExchangeRate } from '@/api/system'
  import dayjs from 'dayjs'
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  const rules = ref({
    gmtRates: [{ required: true, message: '请选择月份' }],
    currencyList: [{ required: true, message: '请选择币种' }],
  })

  const showSyncRateDialog = ref(props.isShow)
  const submitLoading = ref(false)
  const formInfo = ref<any>({})
  const formRef = ref()
  const indeterminate = ref(false)
  const checkedAll = ref(false)
  const monthList = ref<Array<string>>([])

  function getMonthList() {
    for (let i = 0; i < 12; i++) {
      let val = dayjs()
        .add(i * -1, 'month')
        .startOf('month')
        .format('YYYY-MM')
      monthList.value.push(val)
    }
  }
  getMonthList()

  function handleChangeAll(value) {
    indeterminate.value = false
    if (value) {
      checkedAll.value = true
      formInfo.value.currencyList = props.list.map((el: any) => el.currency)
    } else {
      checkedAll.value = false
      formInfo.value.currencyList = []
    }
  }
  function handleChange(values) {
    if (values.length === 3) {
      checkedAll.value = true
      indeterminate.value = false
    } else if (values.length === 0) {
      checkedAll.value = false
      indeterminate.value = false
    } else {
      checkedAll.value = false
      indeterminate.value = true
    }
  }
  // 同步
  async function submitAudit() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    const res: any = await manualSyncExchangeRate(formInfo.value)
    if (!res) return false
    Message.success('同步成功')
    emit('success')
    emit('closed')
  }
  // 关闭
  function closedDialog() {
    showSyncRateDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped></style>
